<template>
  <div style="background-color: rgba(102,255,183,0.05)">
    <el-row>
      <el-col :span="15">
        <div style="margin-top: 15px; height: 360px;">
          <div class="head">好友申请</div>
          <div style="height: 200px; overflow-y: auto;">
            <div v-show="applyList.length === 0">
              <el-empty description="暂无数据"
                        :image-size="100"
                        image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE.png">

              </el-empty>
            </div>
            <div v-for="apply in applyList" :key="apply.id" class="one" v-show="applyList.length > 0">
              <el-row>
                <el-col :span="3">
                  <div>
                    <el-image :src="apply.applyUser.avatar" class="img"/>
                  </div>
                </el-col>
                <el-col :span="15" style="line-height: 25px; margin-top: 10px; font-size: 14px; margin-left: 15px">
                  <div>申请人：<span>{{ apply.applyUser.userName }}</span></div>
                  <div>验证信息：<span>{{ apply.context }}</span></div>
                  <div>申请时间：<span>{{ apply.createTime }}</span></div>
                </el-col>
                <el-col :span="3">
                  <div style="margin-top: 36%">
                    <div v-show="!apply.status">
                      <el-button size="small" type="primary" @click="agree(1, apply.id)">同意</el-button>
                      <el-button size="small" type="danger" @click="refuse(0, apply.id)">拒绝</el-button>
                    </div>
                    <div v-show="apply.status" style="text-align: center; color: #999">
                      <div v-show="apply.type">已同意</div>
                      <div v-show="!apply.type">已拒绝</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="head">已申请</div>
          <div style="height: 220px; overflow-y: auto;">
            <div v-show="myApply.length === 0">
              <el-empty description="暂无数据"
                        :image-size="80"
                        image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE.png">

              </el-empty>
            </div>
            <div v-for="apply in myApply" :key="apply.id" class="one" v-show="myApply.length > 0">
              <el-row>
                <el-col :span="3">
                  <div>
                    <el-image :src="apply.applyUser.avatar" class="img"/>
                  </div>
                </el-col>
                <el-col :span="14" style="line-height: 25px; margin-top: 10px; font-size: 14px">
                  <div>申请人：<span>{{ apply.applyUser.userName }}</span></div>
                  <div>验证信息：<span>{{ apply.context }}</span></div>
                  <div>申请时间：<span>{{ apply.createTime }}</span></div>
                </el-col>
                <el-col :span="7">
                  <div style="margin-top: 15%">
                    <div v-show="!apply.status">
                      <div style="color: #999; text-align: center;">待对方处理</div>
                    </div>
                    <div v-show="apply.status" style="text-align: center; color: #999">
                      <div v-show="apply.type">已同意</div>
                      <div v-show="!apply.type">已拒绝</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <div style="margin-top: 80px; height: 200px;">
          <div class="head">好友列表</div>
          <div v-show="friendList.length === 0">
            <el-empty description="暂无数据"
                      image-size="100"
                      image="https://yangxiong001.oss-cn-hangzhou.aliyuncs.com/photo/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE.png">
            </el-empty>
          </div>
          <div>
            <div v-for="friend in friendList" :key="friend.id" class="fr" @click="toTalk(friend)"
                 v-show="friendList.length > 0">
              <el-row>
                <el-col :span="3">
                  <div>
                    <el-image :src="friend.avatar" class="img"/>
                  </div>
                </el-col>
                <el-col :span="19">
                  <el-row>
                    <div style="border-bottom: #d9d9d9 solid 1px">
                      <p style="color: palevioletred; padding-bottom: 5px">{{ friend.userName }}</p>
                    </div>
                  </el-row>
                  <div style="margin-top: 20px">
                    <span style="font-size: 14px">{{ friend.lastMessage }}</span>
                    <span style="margin-left: 70%; font-size: 12px; color: #999">{{ friend.sendTime }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="1">
        &nbsp;
      </el-col>
      <el-col :span="8">
        <el-card style="margin-top: 15px; height: 720px; margin-right: 20px">
          <div>用户推荐</div>
          <div v-for="user in adviceUser" :key="user.id" class="user" style="font-size: 14px">
            <el-image :src="user.avatar" style="width: 50px; height: 50px"/>
            <div style="text-align: left">{{ user.userName }}</div>
            <div>
              <el-button type="primary" size="mini" @click="save(user)">加好友</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="编辑信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="验证信息" :label-width="formLabelWidth">
          <el-input v-model="message" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span @click="dialogFormVisible = false"><el-button type="danger"
                                                            style="margin-right: 30px">取 消</el-button></span>
        <span @click="addFriend"><el-button type="primary" style="margin-left: 30px">确 定</el-button></span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "friend",
  data() {
    return {
      message: '',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      adviceUser: [],
      applyList: [],
      myApply: [],
      friendList: [],
      tempId: 0
    }
  },
  created() {
    this.getMyApply();
    this.getAdviceUser();
    this.getApply();
    this.getFriend();
  },
  updated() {
    this.getMyApply();
    this.getAdviceUser();
    this.getApply();
    this.getFriend();
  },
  methods: {
    agree(key, id) {
      this.tempId = id;
      this.audit(key);
    },
    refuse(key, id) {
      this.audit(key);
      this.tempId = id;
    },
    toTalk(friend) {
      this.$router.push({path: "/user/talk", query: friend});
    },
    getFriend() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.get("/friend-relation/get/friends", {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            console.log(res.data.data);
            this.friendList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    getMyApply() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.get("/audit-relation/apply", {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.myApply = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    audit(key) {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/audit-relation/audit", {
          id: this.tempId,
          keyword: key
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.data);
          } else {
            this.$message.success(res.data.message);
          }
        })
      }
    },
    getApply() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.get("/audit-relation/list", {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.applyList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    save(user) {
      this.dialogFormVisible = true;
      this.currentUser = user;
    },
    getAdviceUser() {
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/sys-user/friend/list", {
          currentPage: 1,
          totalPage: 10
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.adviceUser = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    addFriend() {
      this.dialogFormVisible = false;
      const token = JSON.parse(localStorage.getItem("loginMes"));
      if (token === null) {
        this.$message.warning('请先登录！');
        this.$router.push('/login');
      } else {
        this.$axios.post("/friend-relation/add", {
          friendId: this.currentUser.id,
          context: this.message
        }, {
          headers: {
            token: token.token
          }
        }).then(res => {
          if (res.data.code === '200') {
            this.$message.success(res.data.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
      this.getApply();
    }
  }
}
</script>

<style scoped>
.user {
  width: 25%;
  margin-left: 15px;
  margin-top: 20px;
  display: inline-block;
}

.dialog-footer {
  text-align: center;
}

.fr {
  margin-top: 10px;
  margin-left: 10px;
  border: #EEEEEE solid 1px;
  border-radius: 9px;
  background-color: white;
}

.one {
  margin-top: 15px;
  border-radius: 8px;
  border: plum solid 1px;
}

.img {
  width: 70px;
  height: 70px;
  margin: 15px 15px 15px 12px;
}

.head {
  padding-left: 15px;
  background-color: powderblue;
  color: white;
  font-size: 20px;
  line-height: 30px;
}

p {
  margin-top: 20px;
}
</style>
